<template>
	<view class="container">
		<!-- 通告栏 -->
		<uni-notice-bar align="center" v-if="searchData.shName==='测试'" single text="未识别到用户所属组别,仅展示测试数据"></uni-notice-bar>
		<!-- 筛选条件 -->
		<view class="example-body">
			<button class="select-button1" @click="showDrawer('showLeft')">筛选条件</button>
			<button class="select-button2" @click="refresh()">刷新</button>
			<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
				<!-- 选择商户 -->
				<uni-section title="商户" type="line">
					<view>
						<uni-data-select v-model="searchData.shName" :localdata="tableShNameList" @change="changeShName"
							:clear="false"></uni-data-select>
					</view>
				</uni-section>
				<!-- 选择时间 -->
				<uni-section title="时间" type="line">
					<view class="page">
						<view class="example-body">
							<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" />
						</view>
					</view>
				</uni-section>
				<!-- 款号 -->
				<uni-section title="款号" type="line">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="searchData.ddkh" @change="refresh"></uni-easyinput>
				</uni-section>
				<!-- 外加工 -->
				<uni-section title="外加工" type="line">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="searchData.djg" @change="refresh"></uni-easyinput>
				</uni-section>
				<!-- 配送状态 -->
				<uni-section title="配送状态" type="line">
					<uni-data-select v-model="searchData.pszt" :localdata="psztRange" @change="refresh"></uni-data-select>
					</uni-section>
			</uni-drawer>
		</view>

		<!-- 表格 -->
		<view class="utable">
			<!-- 表头行 -->
			<view class="utr">
				<view class='table-th' v-for='item in tableHade' :key='item.id'>{{item.text}}</view>
			</view>
			<!-- 表格数据行 -->
			<view class="utr" v-for='item in tableData' @click="clickTr(item.id)" :class="{'selectC':isInArr(item.id)>-1}">
				<view class="table-td" style="width: 150rpx;" >{{item.nickname}}</view>
				<view class="table-td" style="width: 150rpx;overflow: hidden;white-space: nowrap;">{{item.ddkh}}</view>
				<view class="table-td" style="width: 100rpx;">{{item.ddms}}</view>
				<view class="table-td" style="width: 150rpx;">{{item.djg}}</view>
				<view class="table-td" style="width: 150rpx;">{{item.datetime}}</view>
				<view class="table-td"  :style="{color:selectColor(item.pszt), width:'150rpx'}">{{item.pszt}}</view>
			</view>
		</view>
		<!-- 分页器 -->
		<uni-pagination :total=tableDataTotal @change='pageChange'></uni-pagination>
		<!-- 功能按钮 -->
		<view class="btnList">
			<button @click="hurryUp">催货</button>
			<button @click="viewOrderData">明细</button>
			<button style="visibility: hidden;" @click="hurryUp">占位符</button>
			<button @click='onlyNotOut()' v-if="isRoot()">查全部</button>
			<button @click="changeOrderStatus(0)" v-if="isRoot()">配完</button>
			<button @click='changeOrderStatus(1)' v-if="isRoot()">带走</button>
			<button @click='sendWxMsg()' v-if="isRoot()">发微信</button>
			<button @click='printWord()' v-if="isRoot()">打小票</button>
		</view>
	</view>
</template>

<script>
	import config from "../../utils/config.js"
	export default {
		onLoad() {
			this.getShNameList();
		},
		data() {
			return {
				psztRange:[
					{'value': 0,'text': '未配货'},
					{'value': 1,'text': '配货中'},
					{'value': 2,'text': '未带走'},
					{'value': 3,'text': '已办结'},
					],
				range: ["", ""],
				tableShNameList: [],
				tableDataTotal: 0,
				tablePriceTotal: 0,
				tableData: [],
				tableHade: [
					{
						'text': '商户',
						'width': '150rpx'
					},
					{
						'text': '款号',
						'width': '100rpx'
					},
					{
						'text': '件数',
						'width': '100rpx'
					},
					{
						'text': '外加工',
						'width': '150rpx'
					},
					{
						'text': '日期',
						'width': '150rpx'
					},
					{
						'text': '状态',
						'width': '150rpx'
					},
				],
				searchData: {
					shName: '',
					shId: '',
					ddkh: '',
					spName: '',
					timeBeg: '',
					timeEnd: '',
					price: '',
					isOut: '',
					orderBy: '',
					djg: '',
					pszt: '',
					page: 1,
					pageSize: 10,
				},
				selectedIdList: [],
				imgTemp:[],
			}
		},
		watch: {
			range(newval) {
				this.searchData.timeBeg = this.range[0]
				this.searchData.timeEnd = this.range[1]
				this.searchData.page = 1
				this.refresh()
			},
		},
		methods: {
			// 获取用户数组
			getShNameList() {
				if (uni.getStorageSync('userData')['storeUserArr'] === undefined) {
					this.tableShNameList = []
					this.searchData.shName = '测试'
				} else {
					this.tableShNameList = uni.getStorageSync('userData')['storeUserArr']
					this.searchData.shName = this.tableShNameList[0]['value']
				}
				this.refresh()
			},
			// 刷新数据
			refresh() {
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getOrderBySearch",
					data: that.searchData
				}).then(res => {
					that.tableData = res.data
					that.tableDataTotal = res.total
					that.selectedIdList = []
				})
			},
			// 分页控制器
			pageChange(e) {
				let target = e.current
				this.searchData.page = target
				this.refresh()
			},
			// 选择商户
			changeShName(e) {
				this.searchData.shId = e
				this.searchData.page = 1
				this.refresh()
			},
			// 根据订单状态选择颜色
			selectColor(pszt) {
				switch (pszt) {
					case '未配货':
						return 'red'
					case '配货中':
						return 'blue'
					case '未带走':
						return 'red'
					case '已办结':
						return 'green'
				}
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 选中此行
			clickTr(pid){
				let r = this.isInArr(pid)
				if (r > -1){
					this.selectedIdList.splice(r, 1)
				}else{
					this.selectedIdList.push(pid)
				}
			},
			// 判断是否在数组中
			isInArr(target){
				let arr = this.selectedIdList
				if (arr.indexOf(target) >= 0){
					return arr.indexOf(target) 
				}else{
					return -1
				}
			},
			// 修改订单状态
			changeOrderStatus(type){
				if (this.selectedIdList.length > 0){
					if (this.getOrderIsInOne()){
						if (type === 0){
							// 判断订单状态
							let flag = true
							for (let i = 0; i<this.selectedIdList.length;i++){
								for (let j=0;j<this.tableData.length;j++){
									if (this.selectedIdList[i] === this.tableData[j]['id']){
										if (this.tableData[j]['pszt'] !== '配货中'){
											flag = false
										}
									}
								}
							}
							if (!flag){
								uni.showToast({
									title: '请选择配货中订单',
									icon: 'none',
									//显示持续时间为 2秒
									duration: 2000
								})
							}else{
								// 配完
								let that = this
								uni.chooseImage({
									sizeType: ['compressed'], 
									sourceType: ['album', 'camera'],
									success: res => {
										this.imgTemp = res.tempFiles
										uni.uploadFile({
											url: config.baseUrl + '/wx/editOrderStatus', 
											filePath: that.imgTemp[0]['path'],
											name: 'file',
											formData: {
												'selectedIdList': JSON.stringify(that.selectedIdList),
												'ftype': type,
											},
											success: (res) => {
												that.refresh()
											}
										})
									}
								})
						}
						}else{
							// 判断订单状态
							let flag = true
							for (let i = 0; i<this.selectedIdList.length;i++){
								for (let j=0;j<this.tableData.length;j++){
									if (this.selectedIdList[i] === this.tableData[j]['id']){
										if (this.tableData[j]['pszt'] !== '未带走'){
											flag = false
										}
									}
								}
							}
							if (!flag){
								uni.showToast({
									title: '请选择未带走订单',
									icon: 'none',
									//显示持续时间为 2秒
									duration: 2000
								})
							}else{
								// 带走
								let that = this
								this.request({
									url: config.baseUrl + "/wx/editOrderStatusTWO",
									data: {
										'selectedIdList': JSON.stringify(that.selectedIdList),
									},
								}).then(res => {
									that.refresh()
								})
							}
						}
					}
				}else{
					uni.showToast({
						title: '请先选择数据',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			},
			// 判断是否为管理组
			isRoot(){
				if (uni.getStorageSync('userData')['model'] === '管理组'){
					return true
				}else{
					return false
				}
			},
			// 催货
			hurryUp(){
				uni.showToast({
					title: '暂未开放',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			},
			// 查看订单明细单
			viewOrderData(){
				let that = this
				if (this.selectedIdList.length > 0){
					uni.navigateTo({
						url:"/pages/order/viewOrderData/viewOrder?selectedIdList=" + that.selectedIdList
					})
				}else{
					uni.showToast({
						title: '请先选择数据',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			},
			// 发送微信消息
			sendWxMsg(){
				let that = this
				if (this.selectedIdList.length > 0){
					if (this.getOrderIsInOne()){
						this.request({
							url: config.baseUrl + "/wx/sendWxMsg",
							data: {
								'selectedIdList': JSON.stringify(that.selectedIdList),
							},
						}).then(res => {
							console.log(res)
						})
					}
				}else{
					uni.showToast({
						title: '请先选择数据',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			},
			// 打印小票
			printWord(){
				let that = this
				if (this.selectedIdList.length > 0){
					if (this.getOrderIsInOne()){
						this.request({
							url: config.baseUrl + "/wx/rePrint",
							data: {
								'selectedIdList': JSON.stringify(that.selectedIdList),
							},
						}).then(res => {
							console.log(res)
						})
					}
				}else{
					uni.showToast({
						title: '请先选择数据',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			},
			// 查询全部
			onlyNotOut(){
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getOrderByAll",
					data: that.searchData
				}).then(res => {
					that.tableData = res.data
					that.tableDataTotal = res.total
					that.selectedIdList = []
				})
			},
			// 判断选中数据是否为同一单
			getOrderIsInOne(){
				let flag = true
				let data = this.selectedIdList
				let tData = []
				// 获取数据
				for (let i = 0;i<data.length;i++){
					for (let j=0;j<this.tableData.length;j++){
						if (data[i] === this.tableData[j]['id']){
							let r = this.tableData[j]
							r['ddkh'] = r['ddkh']
							tData.push(r)
							break
						}
					}
				}
				for (let i = 0;i<tData.length;i++){
					if (this.getOnlyMath(tData[i]['ddkh']) !== this.getOnlyMath(tData[0]['ddkh']) || tData[i]['nickname'] !== tData[0]['nickname'] || tData[i]['djg'] !== tData[0]['djg']){
						flag = false
						break
					}
				}
				if (!flag){
					uni.showToast({
						title: '商户款号外加工不一致',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
					return false
				}else{
					return true
				}
			},
			// 判断是否为约定字符
			getOnlyMath(s){
				let strArr = s.split("")
				let res = ""
				for (let i=0;i<strArr.length;i++){
					let r = strArr[i].charCodeAt(0)
					let f1 = (r >= 97) && (r <= 122)
					let f2 = (r >= 65) && (r <= 90)
					let f3 = (r >= 45) && (r <= 57)
					if (f1 || f2 || f3){
						res += strArr[i]
					}
				}
				return res
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;

	}

	.utable{
		background-color: #fff;
		border: 0px solid darkgray;
		width: 100%;
		text-align: center;
		height: 780rpx;
		overflow-y: auto;
		
		.utr{
			display: flex;
			width: 100%;
			justify-content: center;
			height: 70rpx;
			align-items: center;
			
			.table-th{
				width: 18%;
				padding: 1%;
				font-size: 14px;
				font-weight: bold;
				color: #909399;
			}
			
			.table-td {
				padding: 1%;
				font-size: 14px;
				font-weight: 400;
				color: #606266;
				line-height: 23px;
				box-sizing: border-box;
				text-align: center;
				border-right: 1px #EBEEF5 solid;
			}
		}

	}

	.selectC {
		background-color: #eee;
	}

	.btnList{
		height: 100rpx;
		
		button{
			height: 100rpx;
			float: left;
			width: 22%;
			margin: 1.5%;
			color: #eee;
			background-color: #e08020;
		}
	}
	.select-button1{
		height: 100rpx;
		width: 78%;
		margin: 1%;
		right: 0;
		color: #eee;
		background-color: #e08020;
		float: left;
	}
	.select-button2{
		height: 100rpx;
		width: 18%;
		margin: 1%;
		right: 0;
		color: #eee;
		background-color: #e08020;
		float: left;
	}
</style>